<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>口算练习器</title>
  <style>
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background-color: #f0f9ff;
      margin: 0;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      box-sizing: border-box;
    }
    .tool-container {
      max-width: 800px;
      width: 100%;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-top: 20px;
      box-sizing: border-box;
    }
    h1 {
      color: #3b82f6;
      text-align: center;
      font-size: 1.8rem;
    }
    .settings {
      background-color: #f3f4f6;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
      box-sizing: border-box;
    }
    .settings-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 15px;
    }
    .setting-group {
      margin-bottom: 10px;
    }
    .setting-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }
    .checkbox-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .number-input {
      width: 60px;
      padding: 5px;
      border: 1px solid #d1d5db;
      border-radius: 4px;
    }
    .questions-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
      margin: 20px 0;
    }
    .question-card {
      background-color: #f9fafb;
      border-radius: 8px;
      padding: 15px;
      text-align: center;
    }
    .question {
      font-size: 20px;
      margin-bottom: 10px;
    }
    .answer-input {
      width: 80px;
      padding: 8px;
      border: 2px solid #d1d5db;
      border-radius: 4px;
      font-size: 16px;
      text-align: center;
    }
    .result {
      height: 24px;
      margin-top: 10px;
      font-weight: bold;
    }
    .correct {
      color: #10b981;
    }
    .incorrect {
      color: #ef4444;
    }
    .controls {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 20px;
      flex-wrap: wrap;
    }
    button {
      background-color: #3b82f6;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      font-weight: bold;
    }
    button:hover {
      background-color: #2563eb;
    }
    .print-button {
      background-color: #10b981;
    }
    .print-button:hover {
      background-color: #059669;
    }
    .score-display {
      text-align: center;
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
    }
    @media print {
      .settings, .controls {
        display: none;
      }
      .answer-input {
        border: 1px solid #000;
      }
      .result {
        display: none;
      }
    }
    
    /* 响应式设计 */
    @media (max-width: 600px) {
      body {
        padding: 10px;
      }
      .tool-container {
        padding: 15px;
        margin-top: 10px;
      }
      h1 {
        font-size: 1.5rem;
        margin-top: 10px;
        margin-bottom: 10px;
      }
      .settings {
        padding: 10px;
      }
      .settings h3 {
        font-size: 1.2rem;
        margin-top: 5px;
      }
      .checkbox-group {
        gap: 10px;
      }
      .questions-container {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
      }
      .question-card {
        padding: 10px;
      }
      .question {
        font-size: 18px;
      }
      .controls {
        flex-direction: column;
        width: 100%;
      }
      button {
        width: 100%;
        margin-bottom: 10px;
      }
    }
    
    @media (max-width: 400px) {
      .questions-container {
        grid-template-columns: 1fr;
      }
      .checkbox-item {
        font-size: 14px;
      }
      .setting-group label {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <h1>口算练习器</h1>
  
  <div class="tool-container">
    <div class="settings">
      <h3>练习设置</h3>
      <div class="settings-row">
        <div class="setting-group">
          <label>运算类型</label>
          <div class="checkbox-group">
            <div class="checkbox-item">
              <input type="checkbox" id="addition" checked>
              <label for="addition">加法</label>
            </div>
            <div class="checkbox-item">
              <input type="checkbox" id="subtraction" checked>
              <label for="subtraction">减法</label>
            </div>
            <div class="checkbox-item">
              <input type="checkbox" id="multiplication" checked>
              <label for="multiplication">乘法</label>
            </div>
            <div class="checkbox-item">
              <input type="checkbox" id="division">
              <label for="division">除法</label>
            </div>
          </div>
        </div>
      </div>
      
      <div class="settings-row">
        <div class="setting-group">
          <label for="min-number">最小数值</label>
          <input type="number" id="min-number" class="number-input" value="1" min="0" max="100">
        </div>
        
        <div class="setting-group">
          <label for="max-number">最大数值</label>
          <input type="number" id="max-number" class="number-input" value="20" min="1" max="100">
        </div>
        
        <div class="setting-group">
          <label for="question-count">题目数量</label>
          <input type="number" id="question-count" class="number-input" value="10" min="1" max="50">
        </div>
      </div>
    </div>
    
    <div class="controls">
      <button id="generate-btn">生成题目</button>
      <button id="check-btn">检查答案</button>
      <button id="print-btn" class="print-button">打印题目</button>
    </div>
    
    <div class="questions-container" id="questions-container"></div>
    
    <div class="score-display" id="score-display"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const generateBtn = document.getElementById('generate-btn');
      const checkBtn = document.getElementById('check-btn');
      const printBtn = document.getElementById('print-btn');
      const questionsContainer = document.getElementById('questions-container');
      const scoreDisplay = document.getElementById('score-display');
      
      // 检测移动设备
      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      
      // 移动设备上调整问题数量默认值
      if (isMobile) {
        const questionCountInput = document.getElementById('question-count');
        if (questionCountInput && questionCountInput.value > 6) {
          questionCountInput.value = 6;
        }
      }
      
      const additionCheckbox = document.getElementById('addition');
      const subtractionCheckbox = document.getElementById('subtraction');
      const multiplicationCheckbox = document.getElementById('multiplication');
      const divisionCheckbox = document.getElementById('division');
      
      const minNumberInput = document.getElementById('min-number');
      const maxNumberInput = document.getElementById('max-number');
      const questionCountInput = document.getElementById('question-count');
      
      let questions = [];
      
      // 生成题目
      generateBtn.addEventListener('click', generateQuestions);
      
      function generateQuestions() {
        const operations = [];
        if (additionCheckbox.checked) operations.push('+');
        if (subtractionCheckbox.checked) operations.push('-');
        if (multiplicationCheckbox.checked) operations.push('×');
        if (divisionCheckbox.checked) operations.push('÷');
        
        if (operations.length === 0) {
          alert('请至少选择一种运算类型');
          return;
        }
        
        const minNumber = parseInt(minNumberInput.value) || 1;
        const maxNumber = parseInt(maxNumberInput.value) || 20;
        const questionCount = parseInt(questionCountInput.value) || 10;
        
        if (minNumber >= maxNumber) {
          alert('最小数值必须小于最大数值');
          return;
        }
        
        questions = [];
        questionsContainer.innerHTML = '';
        scoreDisplay.textContent = '';
        
        for (let i = 0; i < questionCount; i++) {
          const operation = operations[Math.floor(Math.random() * operations.length)];
          let a, b, answer;
          
          switch (operation) {
            case '+':
              a = getRandomNumber(minNumber, maxNumber);
              b = getRandomNumber(minNumber, maxNumber);
              answer = a + b;
              break;
            case '-':
              a = getRandomNumber(minNumber, maxNumber);
              b = getRandomNumber(minNumber, Math.min(a, maxNumber));
              answer = a - b;
              break;
            case '×':
              a = getRandomNumber(minNumber, maxNumber);
              b = getRandomNumber(minNumber, maxNumber);
              answer = a * b;
              break;
            case '÷':
              b = getRandomNumber(Math.max(1, minNumber), maxNumber);
              answer = getRandomNumber(minNumber, maxNumber);
              a = b * answer;
              break;
          }
          
          questions.push({ a, b, operation, answer });
          
          const questionCard = document.createElement('div');
          questionCard.className = 'question-card';
          questionCard.innerHTML = `
            <div class="question">${a} ${operation} ${b} = </div>
            <input type="number" class="answer-input" data-index="${i}">
            <div class="result" id="result-${i}"></div>
          `;
          questionsContainer.appendChild(questionCard);
        }
        
        // 添加回车键检查答案功能
        const answerInputs = document.querySelectorAll('.answer-input');
        answerInputs.forEach(input => {
          input.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
              checkAnswer(this);
              
              // 在移动设备上，自动跳到下一个输入框
              if (isMobile) {
                const allInputs = Array.from(document.querySelectorAll('.answer-input'));
                const currentIndex = allInputs.indexOf(this);
                if (currentIndex < allInputs.length - 1) {
                  allInputs[currentIndex + 1].focus();
                }
              }
            }
          });
        });
      }
      
      // 检查所有答案
      checkBtn.addEventListener('click', function() {
        const answerInputs = document.querySelectorAll('.answer-input');
        let correctCount = 0;
        
        answerInputs.forEach(input => {
          if (checkAnswer(input)) {
            correctCount++;
          }
        });
        
        scoreDisplay.textContent = `得分: ${correctCount}/${questions.length}`;
        
        // 通知父窗口工具使用完成
        if (window.parent && window.parent.postMessage) {
          window.parent.postMessage({ type: 'toolUsed', tool: 'calculator' }, '*');
        }
      });
      
      // 检查单个答案
      function checkAnswer(input) {
        const index = parseInt(input.getAttribute('data-index'));
        const userAnswer = parseInt(input.value);
        const resultDisplay = document.getElementById(`result-${index}`);
        
        if (isNaN(userAnswer)) {
          resultDisplay.textContent = '请输入数字';
          resultDisplay.className = 'result incorrect';
          return false;
        }
        
        if (userAnswer === questions[index].answer) {
          resultDisplay.textContent = '✓';
          resultDisplay.className = 'result correct';
          return true;
        } else {
          resultDisplay.textContent = `✗ 正确答案: ${questions[index].answer}`;
          resultDisplay.className = 'result incorrect';
          return false;
        }
      }
      
      // 打印功能
      printBtn.addEventListener('click', function() {
        window.print();
      });
      
      // 生成随机数
      function getRandomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
      
      // 初始生成题目
      generateQuestions();
    });
  </script>
</body>
</html>